/* 通用布局 */
Vue.component('layout', {
  template: `
    <div class="main-layout" :class="{ 'main-layout-nohead': !header}">
      <div v-if="header" id="header" class="common-header">
        <div class="flex-bect top paddLR">
          <a href="./index.html" class="logo"><img src="./static/image/logo.png" alt=""></a>
          <div class="ico-ph flex-rict"><img src="./static/image/ico-ph.png" alt="" class="ico">{{info.tel}}</div>
          <div class="menu" @click="open"><div><i v-for="item in 3" :key="item"></i></div></div>
        </div>
      </div>
      <slot />
      <div class="bottom-copy flex-ct bg" :style="{ backgroundColor: white ? '#fff' : '#F8F8FA' }">
        <div class="div">
          <div class="p">联系电话：<span class="sp">{{info.phone}}</span></div>
          <div class="p">版权所有：{{info.company}}</div>
        </div>
      </div>
      <my-footer />
      <main-menu :visible.sync="visible"></main-menu>
    </div>
  `,
  props: {
    header: {
      type: Boolean,
      default: true,
    },
    white: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      info: {},
      visible: false,
    }
  },
  components: {
    myFooter: httpVueLoader('./components/footer.vue'),
    mainMenu: httpVueLoader('./components/menu.vue')
  },
  methods: {
    open() {
      this.visible = true
      console.log('success')
    },
  },
  mounted() {
    var info = window.info()
    info.phone = info.tel.replace(/\-/g, '')
    this.info = info
  }
});


/* 通用导航吸顶 */
Vue.component('module', {
  template: `
    <div>
      <div class="ny-header study-recommend">
        <div class="bg"></div>
        <div class="menu-list">
          <ul class="menu-list-flex">
            <li 
              v-for="(item, index) in navs" 
              :key="index" 
              :data-id="'main' + (index + 1)" 
              class="li flex-ct" 
              :class="'menu-item' + index + (index === 0 ? ' active' : '')"
            >{{item}}</li>
          </ul>
        </div>
      </div>
      <div v-for="(item, index) in navs" :key="index" :id="'main' + (index + 1)" class="container">
        <slot :name="'main' + (index + 1)" :title="item" />
      </div>
    </div>
  `,
  props: ['navs'],
  mounted() {
    this.$nextTick(() => {
      var container = $('.container');
      menuScroll(container);
    })
  }
});

// 通用主副标题布局
Vue.component('common-title', {
  template: `
    <div 
      class="common-title-wrapper" 
      :class="{ 'white-theme': theme === 'white', 'black-theme': theme !== 'white' }"
      :style="{
        paddingTop: top,
        paddingBottom: bottom,
      }"
    >
      <div class="main-title-large">{{title}}</div>
      <div class="main-title-small"><slot /></div>
    </div>
  `,
  props: {
    title: {
      type: String,
    },
    theme: {
      type: String,
      default: 'white'
    },
    top: {
      type: String,
      default: '70px'
    },
    bottom: {
      type: String,
      default: '70px'
    }
  },
})


/* 新增页面-标题栏 */
Vue.component('new-module', {
  template: `
    <div class="new-module-container" :style="{ 
      borderBottomWidth: bottom / 100 + 'rem',
      borderBottomStyle: 'solid', 
      borderBottomColor: '#F8F8FA' 
    }">
      <div class="new-title" :style="{
        paddingTop: padding[0] / 100 + 'rem',
        paddingBottom: padding[1] / 100 + 'rem',
      }">{{title}}</div>
      <div class="new-module-wrapper" :style="{
        paddingLeft: margin / 100 + 'rem',
        paddingRight: margin / 100 + 'rem'
      }">
        <slot></slot>
      </div>
    </div>
  `,
  props: {
    title: {
      type: String,
      default: ''
    },
    padding: {
      type: Array,
      default: () => [0, 0],
    },
    bottom: {
      type: Number,
      default: 0
    },
    margin: {
      type: Number,
      default: 28
    }
  }
})


/* 众多院校专业 挑选适合自己的 */
Vue.component('new-school', {
  template: `
    <new-module title="众多院校专业 挑选适合自己的" :padding="[60,40]" :margin="28">
      <div class="new-course-tab">
        <div class="item" :class="{ active: item.value === activeTab }" @click="activeTab = item.value" v-for="(item,index) in tabData" :key="index">
          {{item.label}}
        </div>
      </div>
      <div v-if="activeTab === 1" class="new-course-screen">
        <div class="item-box" :class="{ more }">
          <div class="item" :class="{ active: payload.country === '' }" @click="payload.country = ''">不限</div>
          <div class="item" :class="{ active: payload.country === item.value }" @click="payload.country = item.value" v-for="(item,index) in countryData" :key="index">{{item.label}}</div>
        </div>
        <div class="arrow" :class="{ more }" @click="more = !more"></div>
      </div>
      <div v-else-if="activeTab === 2" class="new-course-screen">
        <div class="item-box">
          <div class="item" :class="{ active: payload.read === '' }" @click="payload.read = ''">不限</div>
          <div class="item" :class="{ active: payload.read === item.value }" @click="payload.read = item.value" v-for="(item,index) in readData" :key="index">{{item.label}}</div>
        </div>
      </div>
      <div v-else-if="activeTab === 3" class="new-course-screen">
        <div class="item-box" :class="{ more }">
          <div class="item" :class="{ active: payload.model === '' }" @click="payload.model = ''">不限</div>
          <div class="item" :class="{ active: payload.model === item.value }" @click="payload.model = item.value" v-for="(item,index) in modelData" :key="index">{{item.label}}</div>
        </div>
        <div class="arrow" :class="{ more }" @click="more = !more"></div>
      </div>
      <div v-else class="new-course-screen">
        <div class="item-box" :class="{ more }">
          <div class="item" :class="{ active: payload.area === '' }" @click="payload.area = ''">不限</div>
          <div class="item" :class="{ active: payload.area === item.value }" @click="payload.area = item.value" v-for="(item,index) in areaData" :key="index">{{item.label}}</div>
        </div>
        <div class="arrow" :class="{ more }" @click="more = !more"></div>
      </div>
      <div class="new-screen-choose">
        <div v-if="payload.country" class="item">
          <div class="content">{{countryStr}}</div>
          <div class="close" @click="payload.country = ''"></div>
        </div>
        <div v-if="payload.read" class="item">
          <div class="content">{{readStr}}</div>
          <div class="close" @click="payload.read = ''"></div>
        </div>
        <div v-if="payload.model" class="item">
          <div class="content">{{modelStr}}</div>
          <div class="close" @click="payload.model = ''"></div>
        </div>
        <div v-if="payload.area" class="item">
          <div class="content">{{areaStr}}</div>
          <div class="close" @click="payload.area = ''"></div>
        </div>
      </div>
      <div class="new-school-list">
        <div class="item" v-for="(item,index) in schoolData" :key="index">
          <div class="photo">
            <img :src="item.photo" alt="" />
          </div>
          <div class="infos">
            <div class="name">{{item.name}}</div>
            <div class="country">对接国家：{{item.country}}</div>
            <div class="model-box">
              <div class="txt">留学模式：</div>
              <div class="model">{{item.model}}</div>
            </div>
            <div class="advantage">院校优势：{{item.advantage}}</div>
            <div class="area">地区：{{item.area}}</div>
            <div class="btns">
              <a href="javascript:void(0);" class="btn-1">详情</a>
              <a href="javascript:void(0);" class="btn-2">咨询</a>
            </div>
          </div>
        </div>
      </div>
    </new-module>
  `,
  data() {
    return {
      tabData: [
        { label: '国家', value: 1 },
        { label: '我要读', value: 2 },
        { label: '模式', value: 3 },
        { label: '地区', value: 4 },
      ],
      activeTab: 1,
      more: false,
      payload: {
        country: '',
        read: '',
        model: '',
        area: ''
      },
      // 国家
      countryData: [
        { label: '美国', value: 1 },
        { label: '英国', value: 2 },
        { label: '加拿大', value: 3 },
        { label: '澳大利亚', value: 4 },
        { label: '德国', value: 5 },
        { label: '新西兰', value: 6 },
        { label: '俄罗斯', value: 7 },
        { label: '日本', value: 8 },
        { label: '法国', value: 9 },
        { label: '欧洲', value: 10 },
        { label: '新马泰', value: 11 },
        { label: '韩国', value: 12 },
        { label: '爱尔兰', value: 13 },
        { label: '荷兰', value: 14 },
        { label: '意大利', value: 15 },
        { label: '西班牙', value: 16 },
        { label: '瑞士', value: 17 },
      ],
      // 我要读
      readData: [
        { label: '本科', value: 1 },
        { label: '硕士', value: 2 },
        { label: '国际高中', value: 3 },
        { label: 'HND', value: 4 },
      ],
      // 模式
      modelData: [
        { label: '1+3', value: 1 },
        { label: '1+4', value: 2 },
        { label: '2+2', value: 3 },
        { label: '3+1', value: 4 },
        { label: '3+2', value: 5 },
        { label: '1+1', value: 6 },
        { label: '1+2', value: 7 },
        { label: '4+0出国', value: 8 },
      ],
      // 地区
      areaData: [
        { label: '上海', value: 1 },
        { label: '北京', value: 2 },
        { label: '广东', value: 3 },
        { label: '东北', value: 4 },
        { label: '山东', value: 5 },
        { label: '重庆/四川', value: 6 },
        { label: '湖北', value: 7 },
        { label: '浙江/江苏', value: 8 },
        { label: '陕西', value: 9 },
        { label: '其他', value: 10 },
      ],
      // 学校列表
      schoolData: [
        {
          id: 1,
          photo: './static/image/new/school-img-1.png',
          name: '北京外国语大学继续教育学院',
          country: '英美澳加法德意韩俄西荷波新',
          model: '1+3/4、1+1/2、2+3',
          advantage: '13年的留学办学经验，与国外高校签署校际合作协议',
          area: '北京市'
        },
        {
          id: 2,
          photo: './static/image/new/school-img-2.png',
          name: '西南政法大学外语学院',
          country: '美、英、澳、加',
          model: '2+2',
          advantage: '入学后可在留服中心备案，通过的课程可获得国外合作大学学分豁免',
          area: '重庆市'
        },
        {
          id: 3,
          photo: './static/image/new/school-img-3.png',
          name: '浙江大学继续教育学院',
          country: '英美澳加新马爱荷',
          model: '1+3/4、1+1、2+2+1',
          advantage: '13年的留学办学经验，与国外高校签署校际合作协议',
          area: '杭州市'
        }
      ]
    }
  },
  computed: {
    countryStr() {
      const target = this.countryData.find(v => v.value === this.payload.country)
      if (target) {
        return target.label
      }
      return ''
    },
    readStr() {
      const target = this.readData.find(v => v.value === this.payload.read)
      if (target) {
        return target.label
      }
      return ''
    },
    modelStr() {
      const target = this.modelData.find(v => v.value === this.payload.model)
      if (target) {
        return target.label
      }
      return ''
    },
    areaStr() {
      const target = this.areaData.find(v => v.value === this.payload.area)
      if (target) {
        return target.label
      }
      return ''
    }
  },
  methods: {
    
  }
})